<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../plugins/vue.min.js"></script>
    <!-- <style>
        #box2{
            background-color: red;
        }
    </style> -->
</head>
<body>
    <div id="box">
<!-- 驼峰命名法,要这样写 -->
        <hh-navbar></hh-navbar>
        <!-- <navbar></navbar>
        <navbar></navbar> -->

    </div>
    <!-- 放在这里失效的,因为不在vue的管辖范围内 -->
    <!-- <hh-navbar></hh-navbar> -->
    <script>
        // 封装组件的方式   全局组件
        // 正常的写法了,驼峰命名法
        Vue.component("hhNavbar",{
        // Vue.component("navbar",{
            // 采用es6模板比较好
            // 注意点,只能有一个根节点,也就是说最外面的div不能有其他的兄弟(目前不显示)
            // 在里面可以定义一个它的子组件--->要声明
            template:`<div style="background-color: red;width: 100px;height: 100px;">
                <button @click="checkLeft">点击</button>
                <button @click="checkRight">点击</button>
                <span>{{myName}}</span>
                <child></child>
                <hh-child></hh-child>
                </div>
            `,
            methods: {
                checkLeft(){
                    console.log("left")
                },
                checkRight(){
                    console.log("right")
                }
            },
            computed:{},
            watch:{},
            // data必须写成函数的形式,跟vue3相同
            data(){
                return{
                    myName:"法外狂徒张三"
                }   
            },  
            // 局部组件
            components:{
                // 局部组件,只属于hhNavbar,也只能在其内部使用,
                // 'hhChild':{
                    hhChild:{
                    template:`
                    <div>
                        我是子组件属于hhNavbar
                        <span>{{myName}}</span>
                        </div>
                    `,
                    data(){
                    return{
                        myName:"无敌的人"
                    }
                }
                },
            }
        })  
        // 也是全局组件
        Vue.component("child",{
            template:`
                <div style="background-color:yellow">我是child</div>
            `
        })

        // 根组件
        new Vue({
            el:"#box",
            data:{

            }
        })
    </script>
</body>
</html>